<script setup lang="ts">
defineOptions({
  name: "topologyModel"
});

import { ref, getCurrentInstance } from "vue";
const { proxy }: any = getCurrentInstance();
const backgroundImage = ref<string>(`url(${proxy.useGetStaticUrl("/ifp-web-static/image/fab/provision/area/topology.png")})`);
</script>

<template>
  <div class="topology-model" :style="{ backgroundImage }">
    <div class="topology-model-title">注：此图为示意图，仅供参考（无放大、缩小、点击等交互功能）</div>
  </div>
</template>

<style>
.topology-model {
  width: 100%;
  min-width: 800px;
  height: 100%;
  min-height: 500px;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: auto 100%;

  .topology-model-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    height: 50px;
    padding: 0 16px;
    font-size: 12px;
    color: #aaa;
    user-select: none;
    border: 1px dashed #ccc;
  }
}
</style>
